<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{message}}
    <h5>----------组件----------</h5>
    <comp></comp>
    <comp></comp>
    <comp></comp>
</div>

<!--组件-->
<template id="comp">
    <div>
        <h2>当前计数: {{count}}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>

<script src="js/vue.js"></script>
<script>
    // 组件可以访问Vue实例的数据吗?
    //组件不可以访问vue实例中的数据
    /*
    * 组件是一个单独功能模块的封装:
    *   这个模块有属于自己的html模版,当然,也应该有属于自己的数据data
    *
    * //组件为什么会有跟vue实例一样的方法和生命周期函数?
    * vue组件的构造函数 是Vue
    *
    * */
    // 为什么组件中的Data必须是一个函数
    //[waring] The "data" option should be a function that returns a per-instance value in component definitions.

    const obj = {
        count: 1
    };

    Vue.component('comp', {
        template: "#comp",
        data(){
            return obj
        },
        methods:{
            increment(){
                this.count++
            },
            decrement(){
                this.count--
            },
        },
        components:{

        }
    });

    const vm = new Vue({
        el: "#app",
        data: {
            message: "hello Vue"
        },
        /*components:{
            'comp': {
                template: "#comp",
                data: {
                    title: "组件标题"
                },
            }
        }*/
    });

    var obj={};
    Object.defineProperty(obj,"uname",{
        get:function(){
            console.log(111);
            return 333;
        },
        set:function(n){
            // console.log(222);
//            $('#cs2').html(n)
            $emit("onchange1", n)
            $emit("onchange2", n)
            $emit("onchange3", n)
            $emit("onchange4", n)
            $emit("onchange5", n)
        }
    })
    obj.uname= "123" ;

    //订阅发布模式 监听

    $on("onchange1",(data)=>{
        console.log(data)
    })
    $on("onchange1",()=>{
        alert(data)
    })
    $on("onchange2",()=>{

    })
    $on("onchange3",()=>{

    })
    $on("onchange4",()=>{

    })
    $on("onchange5",()=>{

    })


</script>
<script>
/*    function abc() {
        return {
            name: "hh",
            age: 18
        }
    }

    let obj1 = abc();
    let obj2 = abc();
    let obj3 = abc();

//    obj1=obj2=obj3


    obj1.name = "aa";
    console.log(obj2,obj3)*/

//a = {}; //0x0001
//b = "123"  // "123"

//c=d=a;

//c=d=b;



/*const obj = {
    name: "hh",
    age: 18
};

function abc() {
    return obj
}

let obj1 = abc();
let obj2 = abc();
let obj3 = abc();

// obj1=obj2=obj3

obj1.name = "aa";
console.log(obj2, obj3)*/


</script>
</body>
</html>